<!--  -->
<template>
  <div class="list_page">
    <el-container>
      <el-aside width="234px" style="margin-right: 10px">
        <img width="100%" :src="phoneData.bigImg" alt="" />
      </el-aside>
      <el-main class="phone_list">
        <div
          class="phone_item"
          v-for="item in phoneData.list"
          :key="item.product_id"
        >
          <img width="160" :src="item.imgUrl" alt=""/>
          <p>{{ item.title }}</p>
          <p class="tage_text">{{ item.tagList.join('|')}}</p>
          <p style="color: #ff6700">{{ item.discountedPrice ? item.discountedPrice : item.price}} 元起</p>
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script>
import data from '@/assets/data';
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {},
    data() {
    //这里存放数据
      return {
        phoneData:{}
      };
    },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {

  },
  //生命周期 - 创建完成(可以访问当前this实例)
  created() {
    console.log(data);
    this.phoneData = data.phoneData;
  },
  //生命周期 - 挂载完成(可以访问DOM元素)
  mounted() {

  },
};
</script>
<style lang='less' scoped>
.list_page {
width: 1200px;
height: 100vh;
margin: auto;
}
.el-main {
padding: 0;
height: 614px;}
.phone_item{
width: 24%;	
height: 300px;
background:rgb(239, 243, 244);
text-align:center;
padding: 10px 16px;
box-sizing: border-box;
}
.phone_list {
display: flex;
flex-wrap: wrap;
justify-content: space-between;	
align-content:space-between;
}
.tage_text{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>